<template>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
      <th>商品id</th>
      <th>商品名</th>
      <th>单价</th>
      <th>库存</th>
      <th>热度</th>
      <th>图片</th>
      <th>商家</th>
      <th>类目所属</th>
      <th>主类目所属</th>
      <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr v-for="i in list">
      <td>{{i.id}}</td>
      <td>{{i.name}}</td>
      <td>{{i.price}}</td>
      <td>{{i.store}}</td>
      <td>{{i.index}}</td>
      <td><img :src="'http://150.158.212.186:3001' + i.src" alt="没有商品图片"></td>

      <td>{{i.user_username}}</td>
      <td>{{i.goods_category_name}}</td>
      <td>{{i.root_category_name}}</td>

      <td><span class="alter" @click="alterClick(i)">修改</span><span class="delete" @click="deleteClick(i.id)">删除</span></td>
    </tr>
    </tbody>
  </table>
</template>

<script>

  export default {
    inject: ['reload'],
    name: "Table",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    beforeDestroy() { // 该组件销毁之前
    },
    methods: {
      alterClick(goods) { // 点击修改按钮
          // console.log(goods);
          this.$router.push({name: 'UserToGoodsAlter', params: {formData: goods}})
      },
      deleteClick(goodsId) { // 点击删除按钮
        if(confirm('确认删除商品' + goodsId + '吗')) {    //增加确认框
          this.$emit('delete', {
            id: goodsId,
          })
        }
      },
    }
  }
</script>

<style scoped>
  table thead tr {
    height: 50px;

    /*background-color: red;*/
  }
  table thead tr th { /*设置表头下划线*/
    border-bottom: 2px solid #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr {
    text-align: center;
    height: 50px;
    background-color: #fff;
  }
  table tbody tr td {
    border-bottom: 1px dashed #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr td img {
    height: 30px;
  }
  table tbody tr td span {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;

    color: white;
    border-radius: 6px;
    /*background-color: red;*/
  }
  table tbody tr td span:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  table tbody tr td .delete {
    background-color: red;
  }
  table tbody tr td .alter {
    background-color: green;
  }
</style>